<template>
  <div class="invoice-con">
      <div class="headerSection">
        <div class="leftAside">
          <SplitVertical title="财务打款"></SplitVertical>
          <v-form :formProps="searchForm" ref="form"
                  v-on:handleReset="handleReset"
                  v-on:coverFormData="coverFormData">
          </v-form>
        </div>
      </div>
      <div class="stand">
          <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
      </div>

    <div class="pagination">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageCount">
        </el-pagination>
      </div>
    </div>
    <!-- //弹出框控件 -->
    <notice v-if="show" @closeTip='closeTip'></notice>
    <audit v-if="showTip" @closeTip='closeTip'></audit>
  </div>
</template>
<script>
  import api from 'js/service'
  import notice from 'components/base/Invoice/Notice.vue'
  import audit from 'components/base/Invoice/Audit.vue'
  import {localStorage} from 'js/localStorage'
  import SplitVertical from "components/common/SplitVertical"
  import VForm from "components/common/VForm"
  import VButton from "components/common/VButton"
  import VTable from "components/common/PageTable/VTable"
  export default {
    components: {
      notice,audit,SplitVertical,VForm,VButton,VTable
    },
    data() {
      return {
        //采购订单日期
        purBillsDate: '',
        listdata: [],
        //单据状态
        purBillsType: '',
        //供应商名称
        supplyName: '',
        //采购初始化
        list: [],
        //分页
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0,
        searchForm: {
          col: 3,
          labelWidth: '85px',
          submitBtn: {
            text: '搜索'
          },
          formItemArray: [{
            label: '日期',
            prop: 'date',
            itemType: 'date',
            placeholder: "请选择",
            value: ''
          }, {
            label: '单据状态',
            prop: 'productCode',
            placeholder: "请选择",
            itemType: 'select',
            options: [{value: '1', label: '待审批'},
              {value: '2', label: '待打款'},
              {value: '3', label: '已撤销'},
              {value: '4', label: '已打款'}],
            value: ''
          }, {
            label: '供应商',
            placeholder: "请选择",
            prop: 'supplyName',
            itemType: 'select',
            options: [],
            value: ''
          }],
        },
        tableParams:{
          dataArray:[],
          showMultiSelection:false,
          columnArray:[
            {label: '订单日期', prop: 'purBillsId',width:'100',sortable: false},
            {label: '负责人', prop: 'name',  sortable: false},
            {label: '状态', prop: 'status', width:'100',sortable: false},
            {label: '采购公司', prop: 'companyName',sortable: false},
            {label: '供应商', prop: 'supplyName',width:'100',  sortable: false},
            {label: '金额', prop: 'price',width:'100',  sortable: false},
            {label: '打款金额', prop: 'money',width:'100',  sortable: false},
            {label: '发票金额', prop: 'billPrice',width:'100', sortable: false},
            {label: '开票数量', prop: 'num',width:'100', sortable: false}
          ],
          rowHandle:{
            buttonArray: [
              {
                text: '详情',
                show: true,
                type: 'text',
                methodName: 'detail'
              }, {
                text: '审核',
                show: true,
                type: 'text',
                methodName: 'examine'
              },
              {
                text: '打款',
                show: true,
                type: 'text',
                methodName: 'giveMoney'
              }
            ],
            view:{
              show:false
            },
            update:{
              show:false
            },
            deleted:{
              show:false
            }
          }
        },
        show: false,
        showTip: false,
        //商品详情
        shopDetail: [],
        approveList: [],
        supplySelectList: [],
        purItemBatchList: [],
        userId: '',
        searchCondition:{},
      }
    },
    filters: {
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        //供应商下拉列表
        this.getSupply()
        this.userId = localStorage.get('userID')
        this.purchasePlanList()
      },
      handleReset(formName) {
        this.$refs.form.resetForm(formName);
      },
      coverFormData(data) {
        this.searchCondition = data;
        this.query()
      },
      handleOperation(rowIndex, row, methodName){
        this.id=row.id
        if(methodName == "detail"){
            this.detail()
        }else if(methodName == "examine"){
            this.examine()
        }else{
            this.giveMoney()
        }
      },
      detail() {

      },
      giveMoney() {
        this.show = true;
      },
      examine() {
        this.showTip = true;
      },
      purchasePlanList() {
        let parmas = {
          pageIndex: 1,
          pageSize: 10
        }
        let success = data => {
          if (data.code == 'OK') {
            this.pageCount = data.pageCount
            this.list = data.data
            this.loading2 = false
          } else {
            this.$message.error(data.msg)
            this.loading2 = false
          }
        }
        api.buyPurList(parmas, success)

      },
      getSupply() {
        let succ = data => {
          if (data.code == 'OK') {
            this.searchForm.formItemArray.forEach(item => {
              if (item.prop === 'supplyName') {
                item.options = this.buildExceptKeyAndValue(data.data, "supplyName", "id", "label", "value");
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        }
        api.getSupply({}, succ)
      },
      closeTip() {
        this.show = false;
        this.showTip = false;
      },
      //查询
      query() {

      },
      //当前页
      handleCurrentChange(val) {
        let parmas = {
          pageIndex: val,
          pageSize: 10,
          supplyId: this.supplyName,
          purBillsDate: this.purBillsDate,
          purBillsType: this.purBillsType,
        }
        let success = data => {
          if (data.code == 'OK') {
            this.list = data.data
            this.pageCount = data.pageCount
          } else {
            this.$message.error(data.msg)
          }
        }
        api.buyPurList(parmas, success)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .invoice-con {
      .headerSection {
        height: 140px;
        background: #fff;
        padding:0 10px;
        border-left: 2px solid #e8e8e8;
        border-right: 2px solid #e8e8e8;
        border-bottom: 2px solid #e8e8e8;
      }

    .pagination {
      padding: 30px 10px;
      text-align: right;
    }
  }
</style>


